<template>
	<view class="case tab">
		<view class="nav">
			<view class="nav-inner">
				<nav-tabs
					:disabled="type == 'create'"
					:values="tabItems" 
					:current="tabIndex" 
					@clickItem="changeTabs">
				</nav-tabs>
			</view>
		</view>

		<view class="tab-content">
			<view class="tab-pane" :class="{active: tabIndex == 0}">
				<basic ref="basic" :value="mediaData"></basic>
			</view>
			<view class="tab-pane" :class="{active: tabIndex == 1}">
				<property ref="property" :value="mediaData"></property>
			</view>
			<view class="tab-pane" :class="{active: tabIndex == 2}">
				<report 
					ref="report" 
					:value="mediaData" 
					:list="list"
					@refreshReport="refreshReport"
					@dateChange="dateChange">
						<template v-slot:status>
							<uni-load-more :status="status"></uni-load-more>
						</template>
					</report>
			</view>
		</view>
		
		<view class="btns fix-bottom" v-if="type == 'edit'">
			<view class="btns-group">
				<button class="btn" v-if="tabIndex === 2" @tap="report">问题上报</button>
				<button class="btn" v-else @tap="submit">提交</button>
			</view>
		</view>
		
		<view class="btns fix-bottom" v-else>
			<view class="btns-group" v-if="tabIndex === 0">
				<button class="btn" @tap="next">下一步</button>
			</view>	
			<view class="btns-group" v-else>
				<view class="btns-item">
					<button class="btn" @tap="prev">上一步</button>
				</view>
				<view class="btns-item">
					<button class="btn" @tap="submit">提交</button>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {createMedia, getMediaDetailByMap, updateMedia, queryDisposeCase} from '@/api/configure.js';
	import {deepClone,getToken,toLogin,getLocation,moveToLocation,mergeUrls} from '@/util/util.js';
	import NavTabs from '@/components/nav-tabs/nav-tabs.vue';
	import Basic from './basic.vue';
	import Property from './property.vue';
	import Report from './report.vue';
	import configUrl from '@/util/url.js';

	export default {
		components: {
			NavTabs,
			Basic,
			Property,
			Report
		},
		data() {
			return {
				tabIndex: 0,
				tabItems: ['基本信息', '产权信息', '案件上报'],
				type: '',
				mediaId: '',
				mediaData: {},
				status: 'more',
				pageNum: 1,
				pageSize: 10,
				total: 100,
				list: [],
				year: ''
			}
		},
		methods: {
			async getMediaData() {
				let params = {
					mediaId: this.mediaId
				}	
				
				let {data} = await getMediaDetailByMap(params);
				
				let mediaData = deepClone(data[0]);
				
				mediaData.mediaId = this.mediaId;
				
				this.mediaData = deepClone(mediaData);
			},
			changeTabs({currentIndex: index}) {	
				if (this.type == 'create') {
					return 
				}
				
				this.tabIndex = index;
			},
			async createMedia(params) {
				let {code, data} = await createMedia(params);
				
				if(code == 200){
					uni.showToast({
						title: '新建媒体成功',
						duration: 2000,
						icon: 'none'
					});
					
					setTimeout(() => {
						uni.$emit('refreshMediaList', {});
						this.type = 'edit';
						this.mediaId = data;
						this.getMediaData();
						this.setTitle();
					}, 2000);
				}
			},
			async updateMedia(params){
				params.mediaId = this.mediaId;
				
				let {code} = await updateMedia(params);
				
				if(code == 200){
					uni.showToast({
						title: '编辑媒体成功',
						duration: 2000,
						icon: 'none'
					});
					
					setTimeout(() => {
						uni.$emit('refreshMediaList', {});
						this.getMediaData();
					}, 2000);
				}
			},
			getParams() {
				let basicParams = this.$refs.basic.sendParams();
				let propertyParams = this.$refs.property.sendParams();
				
				let data = {};
				
				if(Object.keys(basicParams).length > 0) {
					Object.assign(data, basicParams, propertyParams);
				}
				
				return data;
			},
			async prev() {
				this.tabIndex = 0;
			},
			checkRequired(data) {
				if(!data.lng || !data.lat || !data.describeAddress){
					uni.showToast({
						title: '媒体位置不能为空',
						duration: 2000,
						icon: 'none'
					});
					
					return false
				}
				
				if(!data.buildingPointName) {
					uni.showToast({
						title: '点位名称不能为空',
						duration: 2000,
						icon: 'none'
					});
					
					return false
				}
				
				if(!data['length'] || !data['width'] || !data['mediaCount']) {
					uni.showToast({
						title: '尺寸不能为空',
						duration: 2000,
						icon: 'none'
					});
					
					return false
				}
				
				if(
					data['length'].split(',').length !== data['width'].split(',').length ||
					data['width'].split(',').length !== data['mediaCount'].split(',').length ||
					data['mediaCount'].split(',').length !== data['length'].split(',').length 
				){
					uni.showToast({
						title: '请核对尺寸信息',
						duration: 2000,
						icon: 'none'
					});
					
					return false
				}
				
				let isEmptyLength = data['length'].split(',').some((item)=> item === '');
				let isEmptyWidth = data['width'].split(',').some((item)=> item === '');
				let isEmptyCount = data['mediaCount'].split(',').some((item)=> item === '');
				
				if(isEmptyLength || isEmptyWidth || isEmptyCount){
					uni.showToast({
						title: '请核对尺寸信息',
						duration: 2000,
						icon: 'none'
					});
					
					return false
				}
				
				if(!data['district']){
					uni.showToast({
						title: '行政区域不能为空',
						duration: 2000,
						icon: 'none'
					});
					
					return false
				}
				
				return true;
			},
			async next() {
				let basicParams = this.$refs.basic.sendParams();
				
				if(Object.keys(basicParams).length == 0) {
					return ;
				}
				
				let isChecked = this.checkRequired(basicParams);
				
				if(!isChecked){
					return 
				}
				
				this.tabIndex = 1;
			},
			async submit() {
				if (this.type == 'create') {
					if ( this.tabIndex == 0 ) {
						this.tabIndex = 1;
					} else {
						let data = this.getParams();
						
						if(Object.keys(data).length == 0) {
							return ;
						}
						
						this.createMedia(data);
					}
				} else {
					let data = this.getParams();
					
					if(Object.keys(data).length == 0) {
						return ;
					}
					
					let isChecked = this.checkRequired(data);
					
					if(!isChecked){
						return 
					}
					
					this.updateMedia(data);
				}
			},
			report() {
				this.$refs.report.openModal();
			},
			setTabIndex(){},
			setTitle() {
				let title = ''
				
				if (this.type == 'create') {
					title = '新增媒体';
				} else {
					title = '媒体详情';
				}
				
				uni.setNavigationBarTitle({
					title
				})
			},
			async queryList() {
				let params = {
					mediaId:  this.mediaId,
					year: this.year,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				
				let { rows, code, total } = await queryDisposeCase(params);
				
				if (code == 200) {
					let list = rows.slice(0);
					
					list = list.map( item => {
						let urls = [];
							
						if(item.path){
							if (item.path.indexOf(",") == -1) {
								urls = [`${configUrl.CASEIMAGE_URL}${item.path}`];
							} else {
								urls = item.path.split(',').map((u) => `${configUrl.CASEIMAGE_URL}${u}`);
							}
						}
						
						item.path = urls;
						
						return item;
					} )
					
					this.total = total;
					
					if (this.pageNum * this.pageSize >= this.total) {
						this.status = "noMore";
					} else {
						this.status = "more";
					}
					
					this.list = [...this.list, ...list];
				}
			},
			resetPage() {
				this.pageNum = 1;
				this.pageSize = 10;
				this.total = 100;
				this.list = [];
			},
			refreshReport(){
				this.resetPage();
				this.queryList();
			},
			dateChange(e) {
				this.year = e.value;
				
				this.resetPage();
				this.queryList();
			},
			async init() {
				if ( this.type == 'edit' ) {
					await this.getMediaData();
				}
				
				this.queryList();
				
				this.setTitle();
				this.setTabIndex();
			}
		},
		onLoad(option) {
			this.type = option.type;
			this.mediaId = option.mediaId;
			
			this.init();
		},
		onReady() {},
		onReachBottom() {
			if (this.pageNum * this.pageSize >= this.total) {
				this.status = "noMore";
				return;
			} else {
				this.pageNum = this.pageNum + 1;
				this.status = 'loading';
			}
		
			setTimeout(() => {
				this.queryList();
			}, 300);
		}
	}
</script>

<style lang="scss" scoped>
	.tab {
		padding-bottom: 140rpx;
		.nav {
			height: 88rpx;
			margin-bottom: 19rpx;

			.nav-inner {
				padding: 10rpx 30rpx 0rpx;
				background-color: #ffffff;
				/* #ifdef H5 */
				margin-top: 44px;
				/* #endif */
				position: fixed;
				top: 0rpx;
				right: 0rpx;
				left: 0rpx;
				z-index: 3;
			}
		}

		.tab-content {
			.tab-pane {
				display: none;

				&.active {
					display: block;
				}
			}
		}
	}

	.btns {
		background-color: #f3f5fb;
		.btns-group {
			padding: 25rpx 60rpx 25rpx;
			display: flex;
			.btn {
				width: 358rpx;
				height: 90rpx;
				padding: 23rpx 0rpx;
				border-radius: 90rpx;
				background-image: linear-gradient(to right, #44afee, #3a8eed);
				font-size: 36rpx;
				color: #ffffff;
				line-height: 44rpx;
			}
			.btns-item {
				width: 50%;
				padding: 0rpx 30rpx;
				.btn{
					width: 100%;
				}
			}
		}
	}
	
	.fix-bottom {
		position: fixed;
		right: 0rpx;
		bottom: 0rpx;
		left: 0rpx;
		z-index: 9;
	}
</style>
